<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { onMounted, onUnmounted } from 'vue';

const styleId = 'dynamic-style-main-content';
const router = useRouter();
const route = useRoute();

onMounted(() => {
  const style = document.createElement('style');
  style.id = styleId;
  style.innerHTML = `
    .main-content {
      max-width: 100% !important;
      padding: 0 !important;
      width: 100% !important;
    }
  `;
  document.head.appendChild(style);
});

onUnmounted(() => {
  const style = document.getElementById(styleId);
  if (style) {
    document.head.removeChild(style);
  }
});

const steps = [
  {
    id: 'ai-search',
    title: 'AI搜索',
    description: '智能搜索相关教学资源',
    icon: 'search',
    path: '/smart-teaching/ai-search',
  },
  {
    id: 'analysis',
    title: '深度分析',
    description: '根据文件分析教学内容',
    icon: 'bar-chart-o',
    path: '/smart-teaching/analysis',
  },
  {
    id: 'chart',
    title: '一键作图',
    description: '自动生成教学图表',
    icon: 'photo-o',
    path: '/smart-teaching/chart',
  },
  {
    id: 'ppt',
    title: '一键做PPT',
    description: '快速生成教学演示文稿',
    icon: 'play-circle-o',
    path: '/smart-teaching/ppt',
  },
  {
    id: 'question',
    title: '一键出题',
    description: '智能生成练习题目',
    icon: 'notes-o',
    path: '/smart-teaching/question',
  },
];

const isActiveStep = (step: any) => {
  return route.path === step.path;
};

const goStep = (step: any) => {
  if (route.path !== step.path) {
    router.push(step.path);
  }
};
</script>

<template>
  <div class="smart-teaching-container">
    <!-- 左侧步骤条 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h3>智能教学助手</h3>
        <p>选择下方功能开始使用</p>
      </div>
      <div class="steps-container">
        <div
          v-for="step in steps"
          :key="step.id"
          :class="['step-item', { active: isActiveStep(step) }]"
          @click="goStep(step)"
        >
          <div class="step-icon">
            <van-icon :name="step.icon" size="20" />
          </div>
          <div class="step-content">
            <div class="step-title">{{ step.title }}</div>
            <div class="step-description">{{ step.description }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容区域 -->
    <div class="main-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.smart-teaching-container {
  display: flex;
  height: calc(100vh - 60px);
  background-color: #f7f8fa;
  .sidebar {
    width: 280px;
    background-color: #fff;
    border-right: 1px solid #ebedf0;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0,0,0,0.03);
    .sidebar-header {
      padding: 32px 20px 16px 20px;
      border-bottom: 1px solid #ebedf0;
      h3 {
        margin: 0 0 8px 0;
        font-size: 20px;
        font-weight: 700;
        color: #1989fa;
      }
      p {
        margin: 0;
        font-size: 14px;
        color: #969799;
      }
    }
    .steps-container {
      flex: 1;
      padding: 16px 0;
      .step-item {
        display: flex;
        align-items: center;
        padding: 18px 24px;
        cursor: pointer;
        transition: all 0.2s;
        border-left: 4px solid transparent;
        border-radius: 0 24px 24px 0;
        margin-bottom: 8px;
        background: transparent;
        &:hover {
          background: #f7f8fa;
        }
        &.active {
          background: linear-gradient(90deg, #e8f3ff 60%, #f7f8fa 100%);
          border-left: 4px solid #1989fa;
          .step-title {
            color: #1989fa;
            font-weight: 700;
          }
          .step-icon {
            background: #1989fa;
            color: #fff;
          }
        }
        .step-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #f2f3f5;
          color: #1989fa;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 14px;
          font-size: 20px;
          transition: all 0.2s;
        }
        .step-content {
          flex: 1;
          .step-title {
            font-size: 17px;
            font-weight: 600;
            color: #323233;
            margin-bottom: 2px;
            transition: all 0.2s;
          }
          .step-description {
            font-size: 13px;
            color: #969799;
            line-height: 1.4;
          }
        }
      }
    }
  }
  .main-content {
    flex: 1;
    background: #fff;
    margin: 24px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(25,137,250,0.08);
    padding: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.2s;
    }
    .fade-enter-from, .fade-leave-to {
      opacity: 0;
    }
  }
}
@media (max-width: 900px) {
  .smart-teaching-container {
    flex-direction: column;
    .sidebar {
      width: 100%;
      flex-direction: row;
      border-right: none;
      border-bottom: 1px solid #ebedf0;
      box-shadow: none;
      .sidebar-header {
        display: none;
      }
      .steps-container {
        display: flex;
        flex-direction: row;
        padding: 0;
        .step-item {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-left: none;
          border-bottom: 4px solid transparent;
          border-radius: 0 0 24px 24px;
          margin-bottom: 0;
          margin-right: 8px;
          padding: 12px 8px;
          &:hover {
            background: #f7f8fa;
          }
          &.active {
            background: linear-gradient(180deg, #e8f3ff 60%, #f7f8fa 100%);
            border-bottom: 4px solid #1989fa;
            border-left: none;
          }
          .step-icon {
            margin-right: 0;
            margin-bottom: 4px;
          }
        }
      }
    }
    .main-content {
      margin: 8px;
      border-radius: 10px;
    }
  }
}
</style> 